import React, { useMemo } from "react";
import { ILayoutDto, LayoutDto, LayoutProvider } from "../app/LayoutContext";
import { Inter } from "next/font/google";
import SystemHeader from "./Header/SystemHeader";
import { useRouter } from "next/router";
import Test from "./test";
import { ISystemDto, SystemProvider } from "@/app/SystemContext";
import TabContainer from "./TabContainer";
import SystemMenu from "./Menu";

import { ConfigProvider } from "antd";
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";

moment.locale("zh");

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
  pageProps,
}: {
  children: React.ReactNode;
  pageProps: any;
}) {
  const router = useRouter();
  const hidden = useMemo(() => {
    return ["/login"].includes(router.pathname);
  }, [router.pathname]);

  const [systemInfo, setSystemInfo] = React.useState<ISystemDto>({
    theme: "default",
  });
  const systemData = useMemo(() => {
    return { systemInfo, setSystemInfo };
  }, [systemInfo]);

  const [layoutData, setLayoutData] = React.useState<ILayoutDto>({ num: 0 });
  const contextData: LayoutDto = useMemo(() => {
    return { layoutData, setLayoutData };
  }, [layoutData]);

  React.useEffect(() => {
    const userInfo = localStorage.getItem("user_info");
    // if (!userInfo) {
    //   router.push("/login");
    // }
  }, []);

  return (
    <div
      className={`full-w-h flex flex-col overflow-hidden ${inter.className}`}
    >
      <ConfigProvider
        componentSize="middle"
        locale={zhCN}
        theme={{ inherit: systemInfo.theme === "default" }}
      >
        <SystemProvider value={systemData}>
          <LayoutProvider value={contextData}>
            {(!hidden && (
              <div>
                <SystemHeader />
              </div>
            )) || <></>}

            <div className="full-w-h flex overflow-auto padding-8">
              {(!hidden && (
                <div className="full-w-h flex">
                  <SystemMenu />
                  <div className="full-w-h padding-0-8">
                    <TabContainer pageProps={pageProps} />
                  </div>
                </div>
              )) || <div className="full-w-h">{children}</div>}
            </div>
          </LayoutProvider>
        </SystemProvider>
      </ConfigProvider>
    </div>
  );
}
